<template>
  <div class="panel_map">
    <div class="panel_map_display">
      <div class="border_frame"></div>
      <div class="border_footer"></div>
      <div class="border_content">
        <div class="display_title">
          <span></span>精准营养KAP研究——分层次实施研究
        </div>
        <div class="display_cont">
          <div class="display_cont_item top person">
            <div class="display_cont_item_title">全人群</div>
            <div class="display_cont_item_outer">
              <div class="display_cont_item_outer_text">
                <div class="text_label">人群来源：</div>
                <div class="text_content">医院社区</div>
              </div>
              <div class="display_cont_item_outer_text">
                <div class="text_label">参与途径：</div>
                <div class="text_content">招募宣传、常规体检、疾病诊断</div>
              </div>
              <div class="display_cont_item_outer_text">
                <div class="text_label">平台建没：</div>
                <div class="text_content">线上+线下</div>
              </div>
            </div>
          </div>
          <div class="display_cont_item top informed">
            <div class="display_cont_item_title">知情同意</div>
            <div class="display_cont_item_outer">
              <div class="display_cont_item_outer_text">
                <div class="text_label">知情方式：</div>
                <div class="text_content">电子/纸质</div>
              </div>
              <div class="display_cont_item_outer_text">
                <div class="text_label">知情内容：</div>
                <div class="text_content">
                  分层级可选项设定（问卷、 样本及其他信息分别知情）
                </div>
              </div>
              <div class="display_cont_item_outer_text">
                <div class="text_label">知情过程：</div>
                <div class="text_content">CRC/医生讲解参与者签字确认</div>
              </div>
            </div>
          </div>
          <div class="display_cont_item demography">
            <div class="display_cont_item_title">人口学信息</div>
            <div class="display_cont_item_subtitle">
              问卷<span>（基础）</span>+血压+身高+体重+腰围 +臀围
            </div>
            <div class="display_cont_item_outer">
              <div class="display_cont_item_outer_text">
                <div class="text_label">问卷：</div>
                <div class="text_content">电子问卷</div>
              </div>
              <div class="display_cont_item_outer_text">
                <div class="text_label">血压：</div>
                <div class="text_content">现场测量/病例系统导入</div>
              </div>
              <div class="display_cont_item_outer_text">
                <div class="text_label">身高/体重 ：</div>
                <div class="text_content">现场测量</div>
              </div>
              <div class="display_cont_item_outer_text">
                <div class="text_label">腰围/臀围 ：</div>
                <div class="text_content">现场测量</div>
              </div>
            </div>
          </div>
          <div class="display_cont_item body">
            <div class="display_cont_item_title">身体检查</div>
            <div class="display_cont_item_subtitle">
              样本＋实验室检测+特殊检查等
            </div>
            <div class="display_cont_item_outer">
              <div class="display_cont_item_outer_text">
                <div class="text_label">样本：</div>
                <div class="text_content">
                  不强制要求，提供样本采集、处 理及存储指导原贝
                </div>
              </div>
              <div class="display_cont_item_outer_text">
                <div class="text_label">实验室检测：</div>
                <div class="text_content">
                  基于真实世界情况开展 （不做强制要求）
                </div>
              </div>
              <div class="display_cont_item_outer_text">
                <div class="text_label">特色检查：</div>
                <div class="text_content">
                  基于真实世界情况开展 （不做强制要求）
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel_map_inner">
      <div class="echarts_box" id="map"></div>
      <div class="infor_box person">
        <div class="infor_box_title"><span></span>入组人数</div>
        <div class="infor_box_data">
          <div class="infor_box_data_number">1,256,985</div>
          <div class="infor_box_data_compare">
            <div class="compare_top">较昨日</div>
            <div class="compare_bot">
              <div class="compare_bot_icon">
                <span class="compare_bot_icon_triangle"></span>
                <span class="compare_bot_icon_body"></span>
              </div>
              1,534
            </div>
          </div>
        </div>
      </div>
      <div class="infor_box rate">
        <div class="infor_box_title"><span></span>完成率</div>
        <div class="infor_box_data">
          <div class="infor_box_data_number">10%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import jsonData from "@/assets/map/china.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      mapChart: undefined,
    };
  },
  mounted() {
    this.initCharts();
    this.addEventListener();
  },
  methods: {
    initCharts() {
      this.mapChart = echarts.init(document.getElementById("map"));
      echarts.registerMap("china", jsonData);
      this.mapChart.setOption({
        backgroundColor: "transparent",
        tooltip: {
          show: true,
          appendToBody: true,
          borderWidth: 0,
          padding: 0,
          backgroundColor: "transparent",
          formatter: function () {
            return `<div class='echart_tooltip'>
                  <div class='echart_tooltip_item'>入组人数：<span>100,000</span></div>
                  <div class='echart_tooltip_item'>完成率：<span>10%</span></div>
                  <div class='echart_tooltip_item'>医院数量：<span>2</span></div>
                  <div class='echart_tooltip_item'>CRC人数：<span>123</span></div>
                  <div class='echart_tooltip_item'>KAP-Part A完成数量：<span>1511</span></div>
                  <div class='echart_tooltip_item'>KAP-Part A完成率：<span>5%</span></div>
                  <div class='echart_tooltip_item'>KAP-Part B完成数量：<span>1511</span></div>
                  <div class='echart_tooltip_item'>KAP-Part B完成率：<span>15%</span></div>
                  <div class='echart_tooltip_item'>采血完成人数：<span>445</span></div>
                  <div class='echart_tooltip_item'>采血完成率：<span>25%</span></div>
                  <div class='echart_tooltip_item'>初筛符合人数：<span>15</span></div>
              </div>`;
          },
        },
        geo: [
          {
            map: "china",
            zlevel: 2,
            zoom: 1.2,
            top: "8%",
            roam: true, //是否开启平游或缩放
            label: {
              //正常状态
              normal: {
                show: true,
                textStyle: {
                  color: "#ffffff",
                },
              },
              //鼠标放入的样式
              emphasis: {
                textStyle: {
                  color: "#ffffff",
                },
              },
            },
            // 地区区域的样式
            itemStyle: {
              borderColor: "#135ede",
              borderWidth: 2,
              areaColor: "rgba(2,15,51,0.9)",
            },
            emphasis: {
              itemStyle: {
                borderColor: "#00fffc",
                areaColor: {
                  type: "linear",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  globalCoord: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#055ee6", //0% 的颜色
                    },
                    {
                      offset: 1,
                      color: "#36f8c2", //100% 的颜色
                    },
                  ],
                },
                borderWidth: 2,
              },
            },
            select: {
              disabled: true,
            },
            animationDurationUpdate: 0,
          },
          {
            map: "china",
            top: "8%",
            roam: true, //roam与上一个geo配置相同
            zoom: 1.2,
            itemStyle: {
              areaColor: "rgba(2,15,51,0.9)",
              //底层地图样式
              normal: {
                //此处border设置你想要显示的地图外边框样式，可设置border颜色，阴影等
                borderColor: "#00fffc",
                borderWidth: 5,
                shadowOffsetY: 8,
                shadowColor: "#1b78fe",
              },
            },
            animationDurationUpdate: 0,
          },
        ],
        series: [
          {
            name: "china",
            type: "map",
            selectedMode: false,
            label: {
              normal: {
                show: false,
              },
            },
            data: [],
            geoIndex: 0,
          },
        ],
      });
      //监听拖拽
      this.dragListen();

      window.onresize = () => {
        this.mapChart.resize();
      };
    },
    /**
     * 监听拖拽
     */
    dragListen() {
      //捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳
      this.mapChart.on("georoam", (params) => {
        var option = this.mapChart.getOption(); //获得option对象
        console.log("11");
        if (params.zoom != null && params.zoom != undefined) {
          //捕捉到缩放时
          option.geo[1].zoom = option.geo[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
          option.geo[1].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
        } else {
          //捕捉到拖曳时
          option.geo[1].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
        }
        this.mapChart.setOption(option); //设置option
      });
    },
    addEventListener() {
      //窗口尺寸改变
      window.addEventListener("resize", () => {
        this.mapChart.resize();
      });
    },
  },
};
</script>
<style scoped lang="scss">
</style>